<template>
	<div>
		<div class="uw-bg-white uw-pt-10 uw-mb-10 uw-pl-12">
			<uw-form :data="formData" @submit="serachSubmit">
				<uw-form-item :data="formData"></uw-form-item>
			</uw-form>
		</div>
		<el-button class="uw-mb-10" type="primary" @click="showModel=true">新增优惠券</el-button>
		<uw-table :tableConfig="tableConfig">
			<template #button="{data,row}">
				<el-button v-for="item in data" :type="item.type"
					@click="handleButton(item,row)">{{item.label}}</el-button>
			</template>
		</uw-table>
		<uw-pagination :total="totalCount" @currentChange="currentChange" />
		<uw-coupons-model v-model="showModel" ref="couponsRef" @change="getCoupons" />
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive } from 'vue';
	import { ElMessage, ElMessageBox } from 'element-plus';
	import { getCouponsApi , deleteCouponApi } from '@/api/coupon';//接口
	import { Coupon , tableConfigData, ButtonData , formDataInfo } from '@/api/coupon'; // 接口字段定义
	import uwCouponsModel from './components/CouponsModel.vue';
	const showModel = ref(false)
	const formData = reactive(formDataInfo)
	const tableConfig = reactive(tableConfigData)
	const totalCount = ref(0)
	const currentPage = ref(1)
	const formInline = reactive({})
	const couponsRef = ref()
	const getCoupons = async () => {
		const { data } = await getCouponsApi({
			...formInline,
			page: currentPage.value,
			pageSize: 10
		})
		totalCount.value = data.totalCount
		tableConfig.data = data.list
	}
	const serachSubmit = (data:any) => {
		Object.assign(formInline,data)
		getCoupons()
	}
	const handleButton = (row:ButtonData,data:Coupon) => {
		switch (row.value){
			case 'edit':
				showModel.value = true
				couponsRef.value.editChange(data)
				break;
			case 'delete':
				ElMessageBox.confirm('确定删除该优惠券吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(async () => {
					await deleteCouponApi(data.id)
					ElMessage.success('删除成功')
					getCoupons()
				}).catch(() => {})
				break;
			default:
				break;
		}
	}
	const currentChange = (index:number) => {
		currentPage.value = index
		getCoupons()
	}
	onMounted(()=>{
		getCoupons()
	})
</script>

<style>
</style>